<template>
	<view>
		<!-- 头部 -->
		<view class="box-top">
			<view class="top-title">
				<p>彩活动</p>
			</view>
			<view class="lunbo-box">
				<u-swiper height="350" class='lunbo' :list="list"></u-swiper>
			</view>
			<view class="top-group">
				<view class="top-group-conent">
					<view class="ty">
						<img src='http://127.0.0.1:7001/public/activity/type.png'>
						类型
					</view>
					<view class='ty'>
						<img src='http://127.0.0.1:7001/public/activity/time.png'>
						时间
					</view>
					<view class='ty'>
						<img src='http://127.0.0.1:7001/public/activity/pressed.png'>
						介绍
					</view>
				</view>
				<view class="ty-bottom"></view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="box-content">
			<view class="Userinformation-box">
				<view class="content-title">
					<li @click="tab=0" :class="{tab_active:tab==0}" class='anniu'><span>今天</span></li>
					<li @click="tab=1" :class="{tab_active:tab==1}" class='anniu'><span>明天</span></li>
					<li @click="tab=2" :class="{tab_active:tab==2}" class='anniu'><span>后天</span></li>
				</view>
				<view class="Userinformation" v-if="tab==0">
					<view class="user" v-for="item in showList" :key="item.id">
						<img class='headportrait' :src='item.url' />
						<span class='username'>{{item.name}}</span>
						<span class='user-item'>22:00</span>
						<span class='user-miaoshu'>{{item.interest}}</span>
						<img class='pictures' :src='item.hobbyurl'>
						<span class='hobby'>{{item.hobby}}</span>

					</view>
					<span class='dibu' v-if="isFlag">没有数据了</span>
				</view>

				<view class="Userinformation" v-if="tab==1">
					<view class="user" v-for="item in user" :key="item.id">
						<img class='headportrait' :src='item.url' />
						<span class='username'>{{item.name}}</span>
						<span class='user-item'>22:00</span>
						<span class='user-miaoshu'>{{item.interest}}</span>
						<img class='pictures' :src='item.hobbyurl'>
						<span class='hobby'>{{item.hobby}}</span>
					</view>
				</view>

				<view class="Userinformation" v-if="tab==2">
					<view class="user" v-for="item in showList" :key="item.id">
						<img class='headportrait' :src='item.url' />
						<span class='username'>{{item.name}}</span>
						<span class='user-item'>22:00</span>
						<span class='user-miaoshu'>{{item.interest}}</span>
						<img class='pictures' :src='item.hobbyurl'>
						<span class='hobby'>{{item.hobby}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				status: 'loadmore',
				userList: [],
				showList: [],
				pageNum: 5,
				tab: 0,
				TotalDate: [],
				isFlag: false,
			};
		},
		onLoad() {
			this.$api.WhjUser().then(res => {
				this.userList = res.data
				this.showList = this.userList.slice(0, this.pageNum)
			})

		},

		getData() {

		},
		onPullDownRefresh() {
			let newData = this.userList.slice(this.pageNum, this.pageNum += 5)
			this.showList.splice(0, 5, ...newData)
			if (this.showList.length == 0) {
				this.$api.WhjUser().then(res => {
					this.userList = res.data
					this.showList = this.userList.slice(0, this.pageNum)
				})
			}
			uni.startPullDownRefresh()
		},
		onReachBottom() {
			setTimeout(() => {
				let newData = this.userList.slice(this.pageNum, this.pageNum += 5)
				if (newData.length == 0) {
					this.isFlag = true
				}
			}, 3000)
		},
	}
</script>

<style lang="scss">
	.top-title {
		width: 100%;
		height: 80upx;

	}

	.top-title p {
		font-size: 18px;
		text-align: center;
		line-height: 80upx;
		font-weight: 500;

	}

	.top-group {
		width: 100%;
		height: 220upx;
		position: relative;

		.ty {
			width: 22%;
			height: 85px;
			border-radius: 20%;
			border: 1px solid #f2f2f2;
			float: left;
			margin-left: 8%;
			margin-top: 3%;
			font-size: 30upx;
			text-align: center;
			line-height: 10px;

			img {
				width: 55%;
				margin: 10% 24%;
			}
		}

		.top-group-conent {
			width: 100%;
			height: 80%;

		}

		.ty-bottom {
			width: 100%;
			height: 15%;
			background: #f2f2f2;
			margin-top: 3%;
		}
	}

	.lunbo-box {
		width: 100%;
		height: 368upx;
	}

	.lunbo {
		z-index: 2;

	}

	.box-content {
		width: 100%;
		height: 500px;

	}

	.content-title {
		width: 100%;
		height: 100upx;
		border-bottom: 1px solid #999;
		z-index: 3;

	}

	.anniu {
		width: 30%;
		height: 100upx;
		float: left;
		margin-left: 3%;

		list-style: none;

	}

	.anniu span {
		font-size: 35upx;
		text-align: center;
		display: block;
		line-height: 100upx;
	}

	.anniu span:hover {
		color: coral;

	}


	.Userinformation-box {
		width: 100%;
		height: auto;

	}

	.Userinformation {
		width: 100%;
		height: 190upx;
		margin-top: 10px;
	}

	.user {
		width: 100%;
		height: 180upx;
		position: relative;
	}

	.headportrait {
		width: 17%;
		height: 72%;
		margin-top: 4%;
		margin-left: 3%;
	}

	.username {
		font-size: 30upx;
		margin-top: -18%;
		margin-left: 22%;
		display: block;
	}

	.user-item {
		font-size: 44upx;
		margin-top: 0%;
		margin-left: 22%;
		display: block;
	}

	.user-miaoshu {
		font-size: 28upx;
		margin-top: 0%;
		margin-left: 22%;
		display: block;
	}

	.pictures {
		width: 9%;
		height: 37%;
		position: absolute;
		top: 26%;
		right: 4%;
	}

	.hobby {
		font-size: 20upx;
		position: absolute;
		top: 73%;
		right: 5%;
	}
</style>
